<template>
	<view>
		<view class="flex px20 mt30 " :class="screenList.length==1?'row-between':'row-around'">
			<view class="flex" v-for="(item,index) in screenList" :key="index"
				@click="screenShow=screenShow==item.type?'':item.type">
				<view class="mr2">{{item.name}}</view>
				<u-icon name="arrow-down-fill" size="24" />
			</view>
		</view>
		<view class="relative">
			<view class="absolute bg-fff w-max px20 pt20 z-index99 " v-if="screenShow"
				style="overflow: auto;max-height: 450rpx;">
				<scroll-view scroll-y class="h-max">
					<!-- <block v-if="screenShow=='hospital'" v-for="(item,index) in screenList" :key="index">
						<view v-for="(item,index) in hospitalList" :key="index" class="py24 flex row-between"
							@click="input('hospital_type',item)">
							<view class="fs30 color-666" :class="{'color-zs':value.hospital_type == item}">{{item}}
							</view>
							<image src="/static/img/index/select.png" mode="" class="h22 w24 db"
								v-if="value.hospital_type == item" />
						</view>
					</block> -->
					<block v-if="screenShow=='hospital'">
						<view v-for="(item,index) in hospitalList" :key="index" class="py24 flex row-between"
							@click="input('hospital_type',item)">
							<view class="fs30 color-666" :class="{'color-zs':value.hospital_type == item}">{{item}}
							</view>
							<image src="/static/img/index/select.png" mode="" class="h22 w24 db"
								v-if="value.hospital_type == item" />
						</view>
					</block>
					<block v-if="screenShow=='service'">
						<view v-for="(item,index) in serviceList" :key="index" class="py24 flex row-between"
							@click="input('service_id',item.id)">
							<view class="fs30 color-666" :class="{'color-zs':value.service_id == item.id}">{{item.name}}
							</view>
							<image src="/static/img/index/select.png" class="h22 w24 db"
								v-if="value.service_id == item.id" />
						</view>
					</block>
					<block v-if="screenShow=='price'">
						<view v-for="(item,index) in priceList" :key="index" class="py24 flex row-between"
							@click="input('price',item.id)">
							<view class="fs30 color-666" :class="{'color-zs':value.price == item.id}">{{item.name}}
							</view>
							<image src="/static/img/index/select.png" mode="" class="h22 w24 db"
								v-if="value.price == item.id" />
						</view>
					</block>
					<block v-if="screenShow=='distance'">
						<view v-for="(item,index) in distanceList" :key="index" class="py24 flex row-between"
							@click="input('distance',item.id)">
							<view class="fs30 color-666" :class="{'color-zs':value.distance == item.id}">{{item.name}}
							</view>
							<image src="/static/img/index/select.png" mode="" class="h22 w24 db"
								v-if="value.distance == item.id" />
						</view>
					</block>
					<block v-if="screenShow=='sale'">
						<view v-for="(item,index) in saleList" :key="index" class="py24 flex row-between"
							@click="input('sale',item.id)">
							<view class="fs30 color-666" :class="{'color-zs':value.sale == item.id}">{{item.name}}
							</view>
							<image src="/static/img/index/select.png" mode="" class="h22 w24 db"
								v-if="value.sale == item.id" />
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "screenList",
		props: {
			value: {
				default: () => {
					return {
						hospital_type: '', //医院类型
						service_id: '', //项目id
						price: '', //价格 '',asc=由低到高,desc=由高到低
						distance: '', //距离 '':asc=由近到远,desc=由远到近
						sale: '', //销量 '',,asc=由低到高,desc=由高到低
					}
				}
			},
			hospitalList: {
				default: ''
			},
			serviceList: {
				default: ''
			},
			type: {
				default: ''
			}
		},
		computed: {
			screenList() {
				let arr = [{
						name: this.value.hospital_type || '全部医院',
						type: 'hospital',
						show: ['yy', 'pzs', 'pzjg']
					},
					{
						name: this.service_text || '全部项目',
						type: 'service',
						show: ['', 'pzs', 'pzjg']
					},
					{
						name: this.price_text || '综合价格',
						type: 'price',
						show: ['', 'pzs', 'fu']
					},
					{
						name: this.distance_text || '综合距离',
						type: 'distance',
						show: ['']
					},
					{
						name: this.sale_text || '销量',
						type: 'sale',
						show: ['','fu']
					},
				]
				arr = arr.filter(e => e.show.includes(this.type))
				return arr
			},
			service_text() {
				let arr = this.serviceList || []
				let aa = arr.find(e => e.id == this.value.service_id) || ''
				return aa.name || ''
			},
			price_text() {
				let arr = this.priceList || []
				let aa = arr.find(e => e.id == this.value.price) || ''
				return aa.name || ''
			},
			distance_text() {
				let arr = this.distanceList || []
				let aa = arr.find(e => e.id == this.value.distance) || ''
				return aa.name || ''
			},
			sale_text() {
				let arr = this.saleList || []
				let aa = arr.find(e => e.id == this.value.sale) || ''
				return aa.name || ''
			},
		},
		data() {
			return {
				screenShow: '', //筛选框显隐

				priceList: [{
					name: '价格',
					id: ''
				}, {
					name: '价格由低到高',
					id: 'asc'
				}, {
					name: '价格由高到低',
					id: 'desc'
				}, ],

				distanceList: [{
					name: '距离',
					id: ''
				}, {
					name: '由近到远',
					id: 'asc'
				}, {
					name: '由远到近',
					id: 'desc'
				}, ],

				saleList: [{
					name: '销量',
					id: 'syn'
				}, {
					name: '销量由低到高',
					id: 'asc'
				}, {
					name: '销量由高到低',
					id: 'desc'
				}, ],
			};
		},
		methods: {
			input(fidle, value) {
				let params = {
					...this.value
				}
				params[fidle] = value
				this.$emit('input', params)
				this.screenShow = ''
			},

		},
	}
</script>

<style lang="scss">

</style>
